<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>填写订单</title>
</head>
<link rel="stylesheet" type="text/css" href="../css/index.css"/>
<link rel="stylesheet" type="text/css" href="css/yuding.css"/>
<script src="/js/vue.js"></script>
<!-- element-ui引入样式 展示数据的-->
<link rel="stylesheet" href="/css/index.css">
<!-- element-ui引入组件库 -->
<script src="/js/index.js"></script>
<!--引入axios库  从后端获取数据-->
<!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
<script src="/js/axios.min.js"></script>
<body>
<div id="app">

    <div>
        <iframe scrolling="no" frameborder="0" src="../head/head.html" width="100%" height="27"></iframe>
    </div>
    <div class="top">
        <iframe scrolling="no" src="../top/top.html" frameborder="0" width="100%" height="110"></iframe>
    </div>
    <div class="menu">
        <iframe scrolling="no" src="../daohang/meizu.html" frameborder="0" width="100%" height="50"></iframe>
    </div>
    <div class="container">
        <div class="bgcolor_white">
            <div class="cur_position">您的位置：<a href="">首页</a> &gt;&nbsp;&nbsp;门票预订</div>

            <div class="yd_1200">
                <div class="step">
                    <ul>
                        <li class="step1">选择景点</li>
                        <li class="step2">填写订单</li>
                        <li class="step3">预约成功</li>
                    </ul>
                </div>
            </div>

            <div class="yd_1200">
                <div class="adlist">
                    <ul>
                        <li><a href=""><img src="images/201409171010380202785.png"/></a></li>
                    </ul>
                </div>
                <div class="dd_left">
                    <div class="tichet_yd">
                        <span class="ticket_title"><a href="">合计：￥{{money}}</a>郑州方特欢乐世界门票</span>
                        <table width="910" border="0" cellspacing="0" cellpadding="0" class="ticket_tab_xx">
                            <tr>
                                <TH>
                                    <DIV class="tablist">
                                        <ul>
                                            <li class="leixing">门票类型</li>
                                            <li class="date">游玩日期</li>
                                            <li class="jiage">门票单价</li>
                                            <li class="shuliang">门票数量</li>
                                            <li class="zongjia">总价</li>
                                            <li class="fangshi">支付方式</li>
                                        </ul>
                                    </DIV>
                                </TH>
                            </tr>
                            <tr>
                                <td>
                                    <DIV class="tablist">
                                        <!--                                        门票信息-->
                                        <ul>
                                            <li class="leixing">{{ScenicTicket.name}}</li>
                                            <li class="date">
                                                <!-- <input name="" type="text"/> -->
                                                <el-date-picker
                                                        v-model="date"
                                                        type="datetime"
                                                        placeholder="游玩日期"
                                                        style="width: 140px;height: 30px;">
                                                </el-date-picker>
                                                <em>请选定游玩当天</em></li>
                                            <li class="jiage">￥{{ScenicTicket.dprice}}</li>
                                            <li class="shuliang">
                                                <button class="plus" @click="plus()">-</button>
                                                <input name="" type="text" class="shuliang1" v-model="quantity"/>
                                                <button class="add" @click="add()">+</button>
                                                <em>最多选择20</em></li>
                                            <li class="zongjia">￥{{money}}</li>
                                            <li class="fangshi">微信支付</li>
                                        </ul>
                                    </DIV>
                                </td>
                            </tr>


                            <tr>
                                <td align="right">TIP:只能增加同类型支付方式的门票哦！</td>
                            </tr>

                        </table>
                    </div>

                    <div class="tichet_yd">
                        <span class="ticket_title">旅客信息</span>
                        <!--                        常用旅客-->
                        <template  >
                            <el-checkbox-group style="margin-left: 20px;margin-top: 50px;" v-model="checkedCities" @change="handleCheckedCitiesChange">
                                <el-checkbox v-for="city in userList" :label="city">
                                    {{city.name}}
                                </el-checkbox>
                            </el-checkbox-group>
                        </template>

                        <div class="lk_dj">
                            <table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
                                <tr>
                                    <td width="300"><label>姓名：</label><input v-model="fcontact.name" name=""
                                                                             type="text"/></td>
                                    <td rowspan="2" width="300">
                                        <button @click="addfcontact()">添加到常用旅客</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td><label>手机：</label><input v-model="fcontact.mobile" name="" type="text"/></td>
                                </tr>
                            </table>

                        </div>
                    </div>
                    <!--                    取票-->
                    <div class="tichet_yd">
                        <span class="ticket_title">取票人信息</span>
                        <div class="lk_list">
                            <!--                            取票-->
                            <span v-for="(item,index) in userList1"><input name="name" type="radio" @click="cut1(item)"
                                                                           value=""/>{{item.name}}</span>
                        </div>
                        <div class="lk_dj">
                            <table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
                                <tr>
                                    <td width="300"><label>姓名：</label><input name="" v-model="fcontact1.name"
                                                                             type="text"/></td>
                                    <td rowspan="2" width="300">
                                        <button @click="addfcontact()">添加到常用旅客</button>
                                        <em>温馨提示：取票人信息可不填，它表示旅客即取票人</em>
                                    </td>
                                </tr>
                                <tr>
                                    <td><label>手机：</label><input name="" type="text" v-model="fcontact1.mobile"/></td>
                                </tr>
                            </table>

                        </div>
                    </div>
                    <div class="tijiao"><a @click="submit()" target="_blank">提交</a><span class="tips">订单提交成功后，游玩日期当天至景点指定窗口付款取票。</span>
                    </div>

                    <div class="tichet_yd">
                        <span class="ticket_title">购买须知</span>
                        <div class="tuipiao">
                            <ul>
                                <li>退票规则：</li>
                                <li>
                                    <ul>
                                        <li>每张退票费用为4.4元。</li>
                                        <li>请在使用前1天16点之前退票。</li>
                                    </ul>
                                </li>
                                <li>取票入园方式：</li>
                                <li>
                                    <ul>
                                        <li>凭本人二代身份证在xxx处领票入园。</li>
                                    </ul>
                                </li>
                                <li>使用方式：</li>
                                <li>
                                    <ul>
                                        <li>景区全年开放，xxx~xxx早上6点开始售票，xxx~xxx早上8点开始售票。</li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="tichet_yd">
                        <span class="ticket_title"> 点点梦想城预订协议 </span>
                        <div class="tuipiao">
                            <ul>
                                <li>退票规则：</li>
                                <li>
                                    <ul>
                                        <li>每张退票费用为4.4元。</li>
                                        <li>请在使用前1天16点之前退票。</li>
                                    </ul>
                                </li>
                                <li>取票入园方式：</li>
                                <li>
                                    <ul>
                                        <li>凭本人二代身份证在xxx处领票入园。</li>
                                    </ul>
                                </li>
                                <li>使用方式：</li>
                                <li>
                                    <ul>
                                        <li>景区全年开放，xxx~xxx早上6点开始售票，xxx~xxx早上8点开始售票。</li>
                                    </ul>
                                </li>
                            </ul>
                        </div>

                    </div>
                </div>
            </div>
            <div class="footer">
                <iframe scrolling="no" src="../footer/foot.html" frameborder="0" width="1200" height="120"
                        _height="120"></iframe>
            </div>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                orderId: "",//订单id
                checkUser: {
                    'id': ''
                },//用户
                ScenicTicket: "",//门票
                quantity: 1,//数量
                money: 0,//价钱
                date: "",//游玩时间
                userList: [],//订票常用用户集合
                fcontact: {//订票常用旅客
                    "id":'',
                    "userid": "",
                    "name": '',
                    "mobile": '',
                    "isdefault":""
                },
                userList1: [],//取票常用用户集合
                fcontact1: {//取票常用旅客
                    "name": '',
                    "mobile": '',
                    "userid": "",
                },
                commons: [],//记录常用的用户
                checkedCities:[],//默认选中的框

                scenics: [],

            }
        },
        //钩子
        created: function () {
            //判断用户是否登录
            this.getUser();
        },
        methods: {
            //获取门票
            getTicket() {
                let _this = this
                axios.get('/tst/ticket/' + this.orderId)
                    .then(function (response) {
                        console.log("-------" + JSON.stringify(response.data))
                        if (response.data.code == 200) {
                            _this.ScenicTicket = response.data.data
                            //设置价钱
                            _this.money = _this.ScenicTicket.dprice
                        }
                    }).catch(function (error) {
                    console.log(error);
                });
            },
            //获取常用旅客
            getUserList() {
                let _this = this
                axios.get('/tpt/' + this.checkUser.id)
                    .then(function (response) {
                        if (response.data.code == 200) {
                            _this.userList = response.data.data
                            _this.userList1 = response.data.data
                        }
                    }).catch(function (error) {
                    console.log(error);
                });
            },
            plus() {
                this.quantity -= 1;
                if (this.quantity < 1) {
                    this.quantity = 1;
                }
                this.money = this.quantity * this.ScenicTicket.dprice
            },
            add() {
                this.quantity += 1;
                if (this.quantity > 20) {
                    this.quantity = 20;
                    alert("最多只能购买20张")
                }
                this.money = this.quantity * this.ScenicTicket.dprice
            },
            //添加常用旅客
            addfcontact() {
                // alert(JSON.stringify(this.fcontact))
                // 调用方法
                this.fcontact.userid = this.checkUser.id
                let _this = this
                axios.post('/tpt/tptAdd', this.fcontact)
                    .then(function (response) {
                        if (response.data.code == 200) {
                            //成功后调用方法刷新旅客
                            _this.getUserList()
                        }
                    }).catch(function (error) {
                    console.log(error);
                });
            },
            //跳转主页
            home() {
                top.location.href = "/html/lvyoule_11_10/indexshiyan.html"
            },
            //刷新
            refresh() {
                window.reload()
            },
            //判断用户是否登录
            getUser() {
                let _this = this
                axios.get('/tuser/tick')
                    .then(function (response) {
                        if (response.data.code == 200) {
                            //初始化信息
                            _this.checkUser = response.data.data
                            _this.orderId = location.href.split('=')[1];
                            _this.getTicket();
                            _this.getUserList()
                        } else {
                            alert("请先登录，再进行订票操作11111")
                            setTimeout(function () {
                                top.location.href = "/html/front/t-login.html"
                            }, 1000); // 定时时间
                        }
                    }).catch(function (error) {
                    console.log(error);
                });
            },
            //更换常用
            handleCheckedCitiesChange(value) {
                this.commons = value;//勾选的角色存放
            },
            cut1(fcontact) {
                this.fcontact1 = fcontact;
            },
            //提交
            submit() {
                if (this.date==null || this.date == ''){
                    alert("请选择游玩日期")
                    return;
                }
                let d = new Date();
                // alert(this.date.getTime()+"----"+d.getTime()+"-----")
                if (d.getTime()>this.date.getTime()+86400000){
                    alert("不可以选择今日之前的日期")
                    return;
                }
                if (this.commons.length==0 && (this.fcontact.name==null || this.fcontact.name=='' || this.fcontact.mobile==null || this.fcontact.mobile=='')){
                    alert("请选择订票人")
                    return;
                }
                //旅客常用信息
                if (this.fcontact.name!=null && this.fcontact.name!='' && this.fcontact.mobile!=null && this.fcontact.mobile!=''){
                    this.commons.push(this.fcontact)
                }
                //订票人
                // this.commons

                //取票信息
                if (!(this.fcontact1.name!=null && this.fcontact1.name!='' && this.fcontact1.mobile!=null && this.fcontact1.mobile!='')){
                    alert("请选择取票人")
                    return
                }
                //取票人
                // this.fcontact

                //封装成对象
                let data = {
                    "ScenicTicket":this.ScenicTicket,//门票信息
                    "quantity": this.quantity,//门票数量
                    "money": this.money,//价钱
                    "date": this.date,//游玩时间
                    "commons":this.commons,//订票人
                    "fcontact1":this.fcontact1//取票人
                }
                console.log(JSON.stringify(data))

                top.location.href = "zhifu.html"
                localStorage.setItem("data",JSON.stringify(data));
            },
        },


    })


</script>
</body>
</html>
